<template>
        <div>
                <van-nav-bar title="详情页"
                             left-text="返回"
                             right-text="..."
                             left-arrow
                             @click-left="$router.go(-1)" />
                <div class="top"
                     :style="{backgroundImage:'url(' +(shopinfo.info&&shopinfo.info.poi_back_pic_url)+ ')'}">
                        <div class="top2">
                                <div class="top3">
                                        <img :src="shopinfo.info&&shopinfo.info.picUrl"
                                             alt="">
                                </div>
                                <span>{{shopinfo.info&&shopinfo.info.name}}</span>
                        </div>
                        <div class="right"
                             v-if="isCollect"
                             @click="request_unfav(shopinfo.info)"
                             style="color:red">❤</div>

                        <!-- 收藏按钮 -->
                        <div class="right"
                             v-else
                             @click="request_fav( shopinfo.info)">❤</div>

                </div>
                <div class="shopinfo">
                        <div class="left">
                                <van-sidebar v-model="currentIndex">
                                        <van-sidebar-item v-for="(item,index) in shopinfo.taglist"
                                                          :key="index"
                                                          :title="item.name" />

                                </van-sidebar>
                        </div>
                        <div class="right">
                                <div class="top6"
                                     v-for="(item,index) in shopinfo.taglist&&shopinfo.taglist[currentIndex].goodlist"
                                     :key="index">
                                        <div class="top1">
                                                <img :src="item.picture"
                                                     alt="">
                                        </div>
                                        <div class="top2">
                                                <div class="top3">
                                                        <p>{{item.name}}</p>
                                                        <p>{{item.month_saled_content}}</p>

                                                </div>
                                                <div class="top4">
                                                        <span>￥{{item.min_price}}</span>
                                                        <div class="top5">
                                                                <span @click="request_shopcart_sub(item)">-</span>
                                                                <span>1</span>
                                                                <span @click="request_shopcart_add(item)">+</span>
                                                        </div>

                                                </div>
                                        </div>
                                </div>

                        </div>

                </div>
                <shopcart ref="shopcart" />

                <div class="submitbar">
                        <span>
                                <van-icon name="cart"
                                          size="20"
                                          color="blue"
                                          @click="$refs.shopcart.changeVisible()" />总数: {{totalCount}} 总价: {{totalprice}}
                        </span>
                        <span>去结算</span>
                </div>
        </div>
</template>

<script>
import { mapState, mapMutations, mapGetters, mapActions } from 'vuex';
import { shop_shopinfo } from '../utils/api'
import { Dialog } from 'vant';
import shopcart from '../components/ShopCart.vue'

export default {
        data () {
                return {
                        shopinfo: {},
                        currentIndex: 0,

                }
        },
        components: {
                shopcart,
        },
        computed: {
                //mapState()这个工具函数 会将vuex中的数据 映射到组件的computed中.
                ...mapState(['collectlist', 'shopcartlist']),
                //mapGetters()这个工具函数 会将vuex中的计算方法 映射到组件的computed中.
                ...mapGetters([]),
                isCollect () { //当前店铺是否已经收藏( true 表示已收藏, false 表示未收藏 )
                        //拿到 当前店铺对象, 还要同时拿到收藏列表, 然后做判断, 返回判断结果
                        // var index = this.$store.state.collectlist.findIndex((item) => {
                        var index = this.collectlist.findIndex((item) => {
                                return item.mtWmPoiId == this.shopinfo.mtWmPoiId;
                        })
                        return index !== -1
                },
                totalCount () {
                        var num = 0;
                        this.shopcartlist.forEach((item) => {
                                num += item.count;

                        })
                        // for (var i = 0; i < this.shopcartlist.length; i++) {
                        //         num += this.shopcartlist[i].count
                        // }
                        return num

                },
                totalprice () {
                        var sum = 0;
                        // for (var i = 0; i < this.shopcartlist.length; i++) {
                        //         sum += (this.shopcartlist[i].min_price) * (this.shopcartlist[i].count)
                        // }
                        this.shopcartlist.forEach((item) => {
                                sum += (item.count) * (item.min_price)
                        })
                        return sum.toFixed(2);
                        // W3C定义：toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。（四舍六入五凑偶）
                }


        },


        methods: {
                //mapMutations()这个工具函数 会将vuex中的同步方法 映射到组件的methods中.
                ...mapMutations(['collect', 'cancel_collect']),
                //mapActions()这个工具函数 会将vuex中的异步方法 映射到组件的methods中.
                ...mapActions(['request_fav', 'request_unfav', 'request_shopcart_add', 'request_shopcart_sub'])
        },

        mounted () {
                // console.log(this.$route.params.id)
                shop_shopinfo({ id: this.$route.params.id }).then((res) => {


                        if (res.data.shopinfo) {
                                this.shopinfo = res.data.shopinfo

                        } else {
                                Dialog.alert({
                                        title: '提示',
                                        message: '该店铺已倒闭',
                                        theme: 'round-button',
                                }).then(() => {
                                        this.$router.go(-1)
                                });

                        }
                        console.log(this.shopinfo)
                })
        }

}
</script>

<style lang="scss" scoped>
.top {
        display: flex;
        justify-content: space-between;
        padding: 50px 10px;
        color: white;
        > .top2 {
                display: flex;
                align-items: center;
                > .top3 {
                        width: 30px;
                        margin-right: 10px;
                        > img {
                                width: 100%;
                                border-radius: 50px;
                        }
                }
        }
}
.shopinfo {
        display: flex;
        .right {
                //
                // justify-content: space-between;
                > .top6 {
                        display: flex;
                        flex: 1;
                        margin: 15px;
                        font-size: 12px;
                        padding: 10px;
                        > .top1 {
                                width: 80px;
                                margin-right: 10px;
                                > img {
                                        width: 100%;
                                }
                        }
                        > .top2 {
                                display: flex;
                                flex-direction: column;
                                flex: 1;
                                > .top4 {
                                        display: flex;
                                        justify-content: space-between;
                                        margin-top: 20px;
                                        > .top5 {
                                                > span {
                                                        display: inline-block;
                                                        width: 16px;
                                                        height: 16px;
                                                        background-color: lightskyblue;
                                                        color: white;
                                                        font-size: 12px;
                                                        text-align: center;
                                                        line-height: 16px;
                                                }
                                        }
                                }
                        }
                }
        }
}
.submitbar {
        background-color: #999;
        position: fixed;
        bottom: 0;
        width: 100%;
        padding: 10px 20px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: white;
        span:nth-child(2) {
                background-color: lime;
                color: white;
                display: inline-block;
                padding: 8px 15px;
                border-radius: 5px;
        }
}
</style>